<template>
    <div class="tab-content">
        <el-form ref="batteryFormRef" :model="batteryForm" :rules="batteryRules" label-width="150px" class="config-form">
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="在租" prop="rent">
                        <el-input v-model="batteryForm.rent" placeholder="请输入在租数量">
                            <template #append>台</template>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="故障" prop="fault">
                        <el-input v-model="batteryForm.fault" placeholder="请输入故障数量">
                            <template #append>块</template>
                        </el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="换电" prop="swap">
                        <el-input v-model="batteryForm.swap" placeholder="请输入换电数量">
                            <template #append>人</template>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="待租" prop="waitRent">
                        <el-input v-model="batteryForm.waitRent" placeholder="请输入待租数量">
                            <template #append>台</template>
                        </el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <div class="save-button-container">
            <el-button type="primary" @click="saveBatteryData">保存换电数据配置</el-button>
        </div>
    </div>
</template>
<script lang="ts" setup>
    import { ref, reactive } from 'vue'
    import { updateDataClassify } from '@/api/port'
    import { ElMessage } from 'element-plus'

    // 模块3: 换电数据配置表单
    const batteryRules = {
        rent: [{ required: true, message: '在租不能为空', trigger: 'blur' }],
        fault: [{ required: true, message: '故障不能为空', trigger: 'blur' }],
        swap: [{ required: true, message: '换电不能为空', trigger: 'blur' }],
        waitRent: [{ required: true, message: '待租不能为空', trigger: 'blur' }]
    }
    const batteryForm = ref({
        rent: 0, // 在租
        fault: 0, // 故障
        swap: 0, // 换电
        waitRent: 0 // 待租
    })
    const batteryFormRef = ref()
    const saveBatteryData = async () => {
        if (!batteryFormRef.value) return
        
        try {
            await batteryFormRef.value.validate()
            await updateDataClassify({
                id: 4,
                key: 'module5',
                value: batteryForm.value
            })
            console.log('保存换电数据:', batteryForm.value)
            ElMessage.success('换电数据保存成功')
        } catch (error) {
            ElMessage.warning('请填写完整的表单信息')
        }
    }
    
    // 初始化函数
    const init = (module: any) => {
        console.log(module)
        if(module){
            batteryForm.value = module
        }else{
            batteryForm.value = {
                rent: 0, // 在租
                fault: 0, // 故障
                swap: 0, // 换电
                waitRent: 0 // 待租
            }
        }
    }
    // 暴露方法给父组件
    defineExpose({
        init
    })
</script>
<style lang="less" scoped>

</style>